<template>
  <div class="countent">
    <div class="push">
      <!-- 成为代理后展示 -->
      <div class="pushOne" v-if="type == 4">
        <div class="title">
          <input id="input" type="text" :value="share_short" />
          <div class="titleOne">
            新用户通过您的推广链接进行注册登录并购买，支付金额的10%将立即返利到您的账户余额中！
          </div>
          <div class="titleTow">
            推广链接：<span id="text">{{ share_short }}</span>
          </div>
        </div>
        <div class="pushBtn">
          <button @click="handelCopy()">复制链接，立即推广</button>
        </div>
      </div>
      <!-- 非代理展示 -->
      <div class="pushOne" v-if="type != 4">
        <div class="title">
          <div class="titleOne">
            <div>
              <span style="color:#ee782c;">成为代理商的权益：</span><br />
              1.拥有转移设备数和次数的权益，让您合理支配资源；<br />
              2.拥有开设账户的权益，让你的伙伴，无需频繁注册；
            </div>
          </div>
        </div>
        <div class="pushBtn">
          <button @click="handelAgency()" :disabled="disabled">{{becomAgency}}</button>
        </div>
      </div>
    </div>
    <!-- 成为代理后展示 -->
    <div class="addMan" v-if="type == 4">
      <div class="addSet">
        <span>设置账号: </span>
        <input type="text" v-model="addUser.account" placeholder="请设置您的登录账号" />
      </div>
      <div class="addSet">
        <span>设置密码: </span>
        <input type="text" v-model="addUser.pwd" placeholder="请设置您的登录密码" />
      </div>
      <div>
        <button class="addBtn" @click="adduser">确认新增账号</button>
      </div>
    </div>
    <!--一直展示 -->
    <div class="pushMan">
      <div class="today">
        <div>
          <span class="number"><strong>{{ today_count }}</strong>人</span>
          <span>今日推广人数</span>
        </div>
        <div>
          <span class="number"><strong>{{ t_all_count }}</strong>人</span>
          <span>总推广人数</span>
        </div>
        <div>
          <span class="number" style="color: #3b82ff"><strong>{{ mymoney }}</strong>元</span>
          <span>总返返利金额</span>
        </div>
      </div>
      <div class="facility">
        <div>
          <span class="number"><strong>{{ public_devices }}</strong>台</span>
          <span>公有池设备数</span>
        </div>
        <div>
          <span class="number"><strong>{{ private_devices }}</strong>台</span>
          <span>私有池设备数</span>
        </div>
        <div>
          <span class="number"><strong>{{ downnum }}</strong>次</span>
          <span>剩余下载次数</span>
        </div>
      </div>
    </div>
    <div class="pushOne pushUrl" v-if="type != 4">
      <div class="title">
        <input id="input" type="text" :value="share_short" />
        <div class="titleOne">
          新用户通过您的推广链接进行注册登录并购买，支付金额的10%将立即返利到您的账户余额中！
        </div>
        <div class="titleTow">
          推广链接：<span id="text">{{ share_short }}</span>
        </div>
      </div>
      <div class="pushBtnB">
        <button class="UrlBtn" @click="handelCopy()">复制链接，立即推广</button>
      </div>
    </div>
    <!-- 成为代理后展示 -->
    <div class="getPower" v-if="type == 4">
      <div class="payType">
        <div class="payTitle">请选择充值类型：</div>
        <div class="paySelect">
          <el-select class="paySelect" v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
              class="optionsList">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="payType">
        <div class="payTitle">请输入需要充值的用户名：</div>
        <div class="paySelect">
          <input class="inpt" v-model="givePhone" type="tel" placeholder="请输入用户手机号" />
        </div>
      </div>
      <div class="payType">
        <div class="payTitle">请输入充值的数量：</div>
        <div class="paySelect">
          <input class="inpt" v-model="giveNum" type="text" />
        </div>
      </div>
      <div class="payType">
        <button class="btnRight" @click="handelPay()">确认充值</button>
      </div>
    </div>
    <div class="order">
      <table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)" class="order-loading">
        <thead class="table_thead">
          <tr class="table100-head">
            <th class="column1 columnColor">推广用户与新增账号</th>
            <!-- <th class="column1 columnColor">电话</th> -->
            <th class="column2 columnColor">剩余公有池</th>
            <th class="column2 columnColor">剩余私有池</th>
            <th class="column2 columnColor">剩余下载次数</th>
            <th class="column2 columnColor">已返利金额</th>
            <th class="column3 columnColor">状态</th>
          </tr>
        </thead>
        <tbody style="text-align: center">
          <tr class="orderlist" v-for="(item, index) in tableList" :key="index">
            <td class="column1">
              <div>
                <div v-if="item.y_p">
                  <span>新增账号:</span>{{ item.username }}<br>
                  <span>密码:</span>{{ item.y_p }}
                </div>
                <div v-else>
                  <span>注册账号:</span>{{ item.username }}
                </div>
              </div>

            </td>
            <!-- <td class="column1">
              <div>{{ item.title }}</div>
            </td> -->
            <td class="column2">
              <div>{{ item.public_devices }}</div>
            </td>
            <td class="column3">
              <div>{{ item.private_devices }}</div>
            </td>
            <td class="column3">
              <div>{{ item.downnum }}</div>
            </td>
            <td class="column3">
              <div style="color: #3b82ff">
                {{ item.money.toFixed(2) }}
              </div>
            </td>
            <td class="column3">
              <div>{{ item.status }}</div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pagination" v-show="!loading">
        <el-pagination small :page-size="pagesize" background layout="prev, pager, next" :total="total"
          @current-change="currentchange">
        </el-pagination>
      </div>
    </div>
    <!-- 点击充值弹框star -->
    <div v-loading="loading">
      <el-dialog class="payBox" title="已发送验证码" :visible.sync="dialogVisible_msg" :before-close="handleClose">
        <span>验证码已发送至：{{ phone }},请输入验证身份</span>
        <span style="color: #167df1; cursor: pointer" @click="reGetCode">({{ times }}{{ danwei }})</span><br />
        <input class="payInput" v-model="code" type="text" placeholder="请输入验证码" />
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogVisible_msg = false">取消充值</el-button>
          <el-button type="primary" @click="handelPayOver">确认充值</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 点击充值弹框end -->
    <!-- 点击成为代理弹窗star -->
    <el-dialog title="代理商申请资料填写" :visible.sync="dialogVisible_agency" width="30%" center :before-close="handleClose">
      <div class="applyBox">
        <div class="applyTitle">
          提交成功后请耐心等待24小时以内，成功后自动开通「我的代理」页面
        </div>
        <div class="applyMsg">
          <span>请填写微信号：</span>
          <input type="text" v-model="AgentInfo.weixin" placeholder="请输入微信号" />
        </div>
        <div class="applyMsg">
          <span>请填写QQ号：</span>
          <input type="text" v-model="AgentInfo.qq" placeholder="请输入QQ号" />
        </div>
        <div class="applyMsg">
          <span>请填写手机号：</span>
          <input type="text" v-model="AgentInfo.phone" placeholder="请输入手机号" />
        </div>
        <div class="applyMsg">
          <span>请填写支付宝账号：</span>
          <input type="text" v-model="AgentInfo.zfb" placeholder="请输入支付宝账号" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="btnOff" @click="dialogVisible_agency = false">
          再考虑一下
        </button>
        <button class="btnInt" @click="applyAgency">
          提交申请
        </button>
      </span>
    </el-dialog>
    <!-- 点击成为代理弹窗end -->
  </div>
</template>

<script>
  import filters from "../../utils/filters";
  let timer = null;
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //表单中的数据
      return {
        options: [{
            value: "1",
            label: "公有池设备数"
          },
          {
            value: "2",
            label: "私有池设备数"
          },
          {
            value: "3",
            label: "剩余下载次数"
          }
        ],
        type: "1", //1推广，4代理
        value: "1", //充值类型：
        givePhone: "", //赠送手机账号
        giveNum: "", //赠送的次数
        share_short: "", //推广链接
        t_all_count: "", //总推广人数
        today_count: "", //今日推广人数
        public_devices: "", //公有池
        private_devices: "", //私有池
        mymoney: "", //总返返利金额
        downnum: "", //剩余的付费下载次数
        loading: false,
        tableData: [], //后台的数据
        tableList: [], //单页显示的数据
        total: 0, //页码的总数
        pagesize: 5, //单页显示的条数
        currentPage: 1, //当前的页码
        dialogVisible_msg: false, //获取验证码的弹窗
        dialogVisible_agency: false, //立即成为代理商的弹窗
        phone: "",
        times: null, //倒计时秒数
        danwei: "S",
        code: "", //验证码
        loading: false, //转让时加载弹框
        addUser: {
          account: "",
          pwd: ""
        },
        becomAgency: "立即成为代理商",
        disabled: '',
        AgentInfo: {
          weixin: "",
          qq: "",
          phone: "",
          zfb: ""
        }
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      query() {
        this.loading = true;
        this.$post(this.API.agentInfo).then(res => {
          if (res) {
            this.loading = false;
            console.log(res.data);
            // 推广链接
            this.share_short = res.data.info.share_short;
            // 总推广人数
            this.t_all_count = res.data.info.t_all_count;
            // 今日推广人数
            this.today_count = res.data.info.today_count;
            // 公有池设备数
            this.public_devices = res.data.info.public_devices;
            // 私有池设备数
            this.private_devices = res.data.info.private_devices;
            // 已返利金额
            this.mymoney = res.data.info.mymoney;
            this.downnum = res.data.info.downnum;
            //总的用户信息
            this.tableData = res.data.list;
            // 条数
            this.total = this.tableData.length;
            // 当天页面
            this.currentchange(1);
          }
        });
      },
      // 成为代理商
      handelAgency() {
        this.dialogVisible_agency = true;
      },
      handelCopy() {
        var input = document.getElementById("input");
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        this.$message.success("复制成功");
      },
      // 获取用户手机号
      phoneQuery() {
        this.$post(this.API.UserMsg).then(res => {
          console.log(res);
          this.phone = res.data.phone;
          this.type = res.data.type;
          if (this.type == 3) {
            this.becomAgency = "请耐心等待审核……"
            this.disabled = 'disabled'
          } else {
            this.disabled = false
          }

          console.log(this.type);
        });
      },
      // 处理充值
      handelPay() {
        this.getphoneCode();
      },
      // 获取验证码
      getphoneCode() {
        if (this.givePhone.trim() == '') {
          this.$message({
            message: "请输入正确的用户名",
            type: "error"
          });
          return;
        }
        if (this.giveNum.trim().length < 1) {
          this.$message({
            message: "请输入赠送次数",
            type: "error"
          });
          return;
        }
        this.dialogVisible_msg = true;
        this.times = 120;
        var params = new URLSearchParams();
        params.append("mobile", String(this.phone));
        params.append("event", "give");
        this.$post(this.API.Sms_code, params).then(res => {
          clearInterval(timer);
          timer = setInterval(() => {
            this.times--;
            if (this.times <= 0) {
              this.times = "再次获取验证码";
              this.danwei = "";
              clearInterval(timer);
            }
          }, 1000);
        });
      },
      reGetCode() {
        this.getphoneCode();
      },
      // 处理充值弹框关闭
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 处理充值完成
      handelPayOver() {
        if (this.code.trim().length < 3) {
          this.$message.error("请输入验证码");
          return;
        }
        this.loading = true;
        var params = new URLSearchParams();
        params.append("type", String(this.value));
        params.append("toUser", parseInt(this.givePhone));
        params.append("num", parseInt(this.giveNum));
        params.append("code", parseInt(this.code));
        this.$post(this.API.giveNum, params).then(res => {
          console.log(res);
          if (res.code == 1) {
            this.givePhone = "";
            this.giveNum = "";
            this.code = "";
            this.query();
            this.$message({
              message: "充值成功",
              type: "success"
            });
          }
          this.loading = false;
          this.dialogVisible_msg = false;
        });
      },
      // 监听页码改变的事件
      currentchange(newpage) {
        this.currentPage = this.currentPage;
        this.tableList = this.tableData.slice(
          (newpage - 1) * this.pagesize,
          newpage * this.pagesize
        );
      },
      // 行的样式
      rowStyle() {
        return {
          height: "40px"
        };
      },
      // 列的样式
      cellStyle() {
        return {
          padding: 0
        };
      },
      // 代理商添加账号
      adduser() {
        var params = new URLSearchParams();
        params.append("account", parseInt(this.addUser.account));
        params.append("pwd", String(this.addUser.pwd));
        this.$post(this.API.addUser, params).then(res => {
          console.log(res);
        });
      },
      // 推广申请代理
      applyAgency() {
        var params = new URLSearchParams();
        params.append("weixin", parseInt(this.AgentInfo.weixin));
        params.append("qq", String(this.AgentInfo.qq));
        params.append("phone", parseInt(this.AgentInfo.phone));
        params.append("zfb", parseInt(this.AgentInfo.zfb));
        this.$post(this.API.submitAgentInfo, params).then(res => {
          console.log(res);
          if (res.code == 1) {
            this.dialogVisible_agency = false;
            this.query();
            this.phoneQuery();
          }
        });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.query();
      this.phoneQuery();
    }
  };

</script>
<style scoped>
  button:focus {
    outline: 0;
  }

  input:focus {
    outline: none;
  }

  .countent {
    width: 100%;
    padding: 30px 40px 0;
  }

  .push {
    width: 100%;
    max-width: 920px;
    padding: 20px;
    padding-top: 35px;
    min-height: 120px;
    background-image: url('../../assets/img/wode_qybk.png');
    background-size: 100% 100%;
    background-color: #272727;
  }

  .pushOne {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
  }

  .title {
    position: relative;
    color: #fed89a;
    flex: 1;
  }

  .title input {
    top: 9999999px;
    position: absolute;
  }

  .titleOne {
    width: 100%;
    height: auto;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
  }

  .titleTow {
    width: 100%;
    height: auto;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-top: 20px;
  }

  #text {
    text-decoration-line: underline;
    color: #ff7226;
  }

  .pushBtn {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pushBtn button {
    width: 220px;
    height: 50px;
    border-radius: 26px;
    border: 1px;
    background-image: linear-gradient(to right, #f79935, #fd590f);
    color: #fff;
  }

  .pushBtnB .UrlBtn {
    width: 225px;
    height: 50px;
    border-radius: 26px;
    border: 1px solid #ff7226;
    color: #ff7226;
    background-color: transparent;
  }

  .addMan {
    margin-top: 20px;
    width: 100%;
    height: auto;
    display: flex;
    border: 0px;
    border-radius: 8px;
    background-color: #272727;
    justify-content: space-between;
    padding: 22px 12px;
    align-items: center;
  }

  .addSet {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
  }

  .addSet span {
    margin-right: 14px;
    color: #fff;
  }

  .addSet input {
    width: 100%;
    max-width: 240px;
    height: 36px;
    background: #272727;
    border-radius: 4px;
    border: 1px solid #ccc;
    color: #fff;
    padding-left: 5px;
  }

  .addBtn {
    width: 120px;
    height: 36px;
    background-color: #ff7226;
    color: #fff;
    border-radius: 4px;
    border: 0;
  }

  .addBtn:focus {
    outline: none;
  }

  .pushMan {
    margin-top: 20px;
    width: 100%;
    height: auto;
    display: flex;
  }

  .today {
    width: 100%;
    max-width: 450px;
    height: 80px;
    padding: 17px 0;
    border-radius: 4px;
    background-color: #272727;
    border: 0px;
    display: flex;
    justify-items: space-around;
    align-items: center;
    margin-right: 10px;
    color: #fff;
  }

  .today div {
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
  }

  .today div:last-child {
    border-right: 0;
  }

  .facility {
    width: 100%;
    max-width: 450px;
    height: 80px;
    padding: 17px 0;
    border-radius: 4px;
    background-color: #272727;
    border: 0px;
    display: flex;
    justify-items: space-around;
    align-items: center;
    margin-right: 10px;
    color: #fff;
  }

  .facility div {
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
  }

  .facility div:last-child {
    border-right: 0;
  }

  .number {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff7226;
  }

  .number strong {
    display: inline-block;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    position: relative;
    top: 1px;
    right: 4px;
  }

  .pushUrl {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border: 0px;
    background-color: #272727;
    padding: 30px 20px;
    border-radius: 8px;
  }

  .getPower {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border: 0px;
    padding: 30px 20px;
    border-radius: 8px;
    background-color: #272727;
  }

  .getPower>>>.el-input__inner {
    background-color: #272727;
    color: #fff;
  }

  .getPower>>>.el-input__inner:focus {
    border-color: #ff7226;
  }

  div>>>.el-select-dropdown .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item.selected {
    color: #ff7226;
  }

  .payType {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
  }

  .paySelect {
    width: 190px;
    height: 36px;
  }

  .payTitle {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-bottom: 10px;
  }

  div>>>.el-input__inner {
    height: 36px;
  }

  .inpt {
    width: 190px;
    height: 36px;
    background-color: #272727;
    border-radius: 4px;
    border: 1px solid #ccc;
    color: #fff;
    padding-left: 5px;
  }

  .btnRight {
    width: 100px;
    height: 36px;
    background-color: #ff7226;
    color: #fff;
    border-radius: 4px;
    border: 0;
  }

  .btnRight,
  .inpt:focus {
    outline: 0;
  }

  .order {
    width: 100%;
    margin: 20px auto 0;
    background-color: #272727;
    border-radius: 8px;
  }

  .order-loading>>>.el-loading-spinner i {
    color: #FF7226;
  }

  .order-loading>>>.el-loading-spinner .el-loading-text {
    color: #FF7226;
  }

  .table_thead {
    font-size: 16px;
  }

  .table_thead tr {
    border-bottom: 1px solid #ccc;
  }

  .pagination {
    width: 100%;
    text-align: center;
  }

  .column1 {
    width: 240px;
  }

  .column2 {
    width: 156px;
  }

  .column3 {
    width: 134px;
  }

  .orderlist {
    height: 40px;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    color: #fff;
  }

  .columnColor {
    background-color: #272727;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }

  th {
    /* border: 1px solid #dedede; */
  }

  td {
    /* border: 1px solid #dedede; */
  }

  div>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff7226 !important;
    color: #fff;
  }

  div>>>.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #ff7226;
  }

  div>>>div[data-v-4dc1f2ac] .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff7226 !important;
    color: #fff;
  }

  .payBox {
    width: 100%;
    max-width: 480px;
    margin: 100px auto 0;
  }

  div>>>.el-dialog {
    width: 100%;
  }

  div>>>.el-dialog__body {
    padding: 0 20px 30px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    word-break: break-all;
  }

  .payInput {
    width: 100%;
    max-width: 440px;
    margin-top: 20px;
    height: 36px;
  }

  div>>>.el-dialog__footer {
    text-align: center;
  }

  .applyBox {
    width: 100%;
    height: auto;
    text-align: center;
  }

  .applyTitle {
    width: 100%;
    height: auto;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-bottom: 32px;
  }

  .applyMsg {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .applyMsg span {
    width: 150px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    text-align: right;
    margin-right: 8px;
  }

  .applyMsg input {
    flex: 1;
    max-width: 300px;
    text-align: left;
    height: 36px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
  }

  .btnOff {
    width: 140px;
    height: 36px;
    background-color: #e2e2e2;
    border-radius: 4px;
    border: 0;
  }

  .btnInt {
    width: 140px;
    height: 36px;
    background-color: #ff7226;
    border-radius: 4px;
    border: none;
    color: #fff;
  }

  @media screen and (max-width: 992px) {
    .countent {
      padding: 10px;
    }

    .push {
      flex-direction: column;
      flex-wrap: wrap;
      -webkit-box-direction: reverse;
      justify-content: center;
      white-space: pre-wrap;
    }

    .addMan {
      flex-direction: column;
      align-items: center;
    }

    .addSet {
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .pushMan {
      flex-direction: column;
      align-items: center;
    }

    .getPower {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .payType {
      margin-bottom: 15px;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }

    .payTitle {
      width: 200px;
      text-align: right;
      margin-right: 8px;
    }

    .paySelect {
      flex: 1;
    }

    .btnRight {
      position: relative;
      left: 100%;
    }

    .table_thead {
      display: none;
    }

    td {
      border: 0;
    }

    .pushBtn {
      margin-top: 20px;
    }

    .orderlist {
      display: flex;
      height: auto;
      overflow: hidden;
      flex-direction: column;
    }

    table tbody {
      overflow: hidden;
    }

    table tbody tr {
      display: flex;
      width: 86vw;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
      padding-bottom: 10px;
    }

    .orderlist td {
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 16px;
      width: 100%;
    }

    table tbody tr td:before {
      width: 35%;
      text-align: right;
      color: #000000;
      margin-right: 20px;
      margin-top: 5px;
    }

    tr td div {
      width: 65%;
      color: #a2a1a2;
      text-align: left;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    table tbody tr td:nth-child(1):before {
      content: "用户名:";
    }

    table tbody tr td:nth-child(2):before {
      content: "剩余公有池:";
    }

    table tbody tr td:nth-child(3):before {
      content: "剩余私有池	:";
    }

    table tbody tr td:nth-child(4):before {
      content: "剩余下载次数:";
    }

    table tbody tr td:nth-child(5):before {
      content: "已返利金额:";
    }

    table tbody tr td:nth-child(6):before {
      content: "状态:";
    }

    .pagination {
      width: 93%;
      text-align: center;
    }
  }

  @media screen and (max-width: 500px) {
    .payTitle {
      text-align: left;
      justify-content: space-around;
    }

    .payType {
      align-items: flex-start;
    }

    .btnRight {
      left: 70%;
    }

    .pushOne {
      flex-direction: column;
    }
  }

</style>
